iT邦幫忙

2021 iThome 鐵人賽

DAY 11
0
自我挑戰組

新手遇上Vue.js系列 第 25

Day25 非動態組件 Async Components

  • 分享至 

  • xImage
  •  

當在大型專案中,可以將其分成小塊,當有需要用到組件時才從伺服器下載,Vue只會在組件需要渲染時才會觸發工廠函數,並緩存結果以備再次的渲染

非動態組件定義

  • 工廠函數
  • promise

工廠函數
依回傳的結果可以分成

  • Resolve : 成功
  • Reject(reason) : 失敗可回傳原因
    並依照回傳的結果作相對應的動作,透過app.component註冊到實體中
    https://ithelp.ithome.com.tw/upload/images/20211009/20140076TuIXuUeNww.png
    在1000毫秒後頁面將會得到組件進行渲染

Promise
在這個component中會回傳一個promise函式,可以依照回傳的結果是resolve(成功)或reject(失敗)來進行設定的動作
https://ithelp.ithome.com.tw/upload/images/20211009/201400763MUf07hymF.png

處理加載狀態
工廠函數可以返回以下格式
https://ithelp.ithome.com.tw/upload/images/20211009/20140076yUUjZTRZJr.png

參考資料: https://vuejs.org/v2/guide/components-dynamic-async.html#Async-Components


上一篇
Day24 動態組件 Dynamic Components
下一篇
Day26 子元件與父元件
系列文
新手遇上Vue.js30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言